<!--搜索结果展示 -->
<template>
  <div>
    <span v-show="false">{{ keywords }}{{ pageNum }}</span>
    <ul>
      <li>
        <div>
          <span class="titleDemoOne">歌曲名</span>
          <span class="titleDemoTwo">歌手</span>
          <span class="titleDemoThr">专辑</span>
        </div>
        <el-divider> </el-divider>
      </li>
      <li
        class="liDemo"
        v-for="(sl, index) in song.songList"
        :key="index"
        @click="songClickAction(sl)"
      >
        <div>
          <span class="numDemo">{{ index + 10 * (pageNum - 1) + 1 }}</span>
          <el-divider direction="vertical"></el-divider>
          <span class="songDemo">{{ sl.name }}</span>
          <span class="nameDemo">{{ sl.ar[0].name }}</span>
          <span class="alDemo">《{{ sl.al.name }}》</span>
          <el-divider></el-divider>
        </div>
      </li>
    </ul>
    <el-pagination
      class="msg-pagination-container"
      :background="isBackground"
      layout="prev, pager, next"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入vuex 以及查询js得到数据

import { mapState } from "vuex";
export default {
  name: "ShowSearch",
  props: ["keywords"],
  data() {
    return {
      isBackground: true,
      pageNum: 1, //当前页面第几页
      pageSize: 10, //每页有多少条
      total: 300, // 总记录数
    };
  },
  computed: {
    ...mapState(["song"]),
  },
  methods: {
    getSongList() {
      const searchData = {
        keywords: this.keywords,
        pageNum: this.pageNum,
      };
      this.$store.dispatch("song/setSongList", searchData);
    },
    handlePageChange(currentPage) {
      this.pageNum = currentPage;
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      // 在此刷新数据
    },
    //播放歌曲
    songClickAction(item) {
      // console.log("点击成功", item);
      // this.$bus.$emit("sendSongMsg", JSON.stringify(item));
      this.$store.commit({
        type: "song/SELECTSONGBYID",
        id: item.id,
        list: item,
      });
      this.$store.dispatch({
        type: "song/getSongLyric",
        id: this.song.currentSong.id,
      });
    },
  },
  watch: {
    keywords: {
      handler() {
        this.getSongList();
        this.pageNum = 1;
      },
    },
    pageNum: {
      handler() {
        this.getSongList();
      },
    },
  },
};
</script>


<style scope>
.msg-pagination-container {
  float: right;
  margin-bottom: 20px;
  margin-right: 29px;
}
.msg-pagination-container.is-background .el-pager li {
  /*对页数的样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .btn-next {
  /*对下一页的按钮样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .btn-prev {
  /*对上一页的按钮样式进行修改*/
  background-color: #ced4da;
  color: #212529;
}
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #1d953f;
  color: #f8f9fa;
}
/* 歌词列表css   ---star */
li {
  list-style: none;
}
/* el-divider 修改高度&虚线效果 */
.el-divider--horizontal {
  width: 1120px;
  margin: 18px 0;
  background: 0 0;
  border-top: 3px solid #ced4da;
}

.el-divider--vertical {
  width: 2px;
}

.titleDemoOne {
  font-weight: bold;
  font-size: 14px;
  margin-left: 40px;
}
.titleDemoTwo {
  font-weight: bold;
  font-size: 14px;
  margin-left: 480px;
}
.titleDemoThr {
  font-weight: bold;
  font-size: 14px;
  margin-left: 260px;
}
.songDemo {
  /* position: fixed;
  left: 570px; */
  margin-left: 15px;
}
.nameDemo {
  position: absolute;
  left: 600px;
}
.alDemo {
  position: absolute;
  left: 870px;
}
/* 点击列表css */
.liDemo:hover {
  color: #1d953f;
  font-size: 17px;
  cursor: hand;
}
/* 歌词列表css   ---star */
</style>
